import React, { useState, useEffect } from 'react'
import { Table, Button, Tree, Modal } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'
const { confirm } = Modal

const RoleList = () => {
  const [dataSource, setDataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [currentId, setcurrentId] = useState(0)
  const [isModalVisible, setisModalVisible] = useState(false)
  const [currentRights, setcurrentRights] = useState([])

  useEffect(() => {
    getdata()
    getdrights()
  }, [])
  //获取权限
  const getdata = () => {
    axios.get('/roles').then((res) => {
      setDataSource(res.data)
    })
  }
  //获取目录
  const getdrights = () => {
    axios.get('/rights?_embed=children').then((res) => {
      setRightList(res.data)
    })
  }
  //表格定义
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      },
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => confirmMethod(item)}
            />
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              onClick={() => {
                setisModalVisible(true)          //打开弹框
                setcurrentRights(item.rights)    //保存渲染当前选中目录
                setcurrentId(item.id)            //保存当前id
              }}
            />
          </div>
        )
      },
    },
  ]

  //删除
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(item)
      },
      onCancel() {},
    })
  }
  const deleteMethod = (item) => {
    axios.delete(`/roles/${item.id}`).then((res) => {
      getdata()
    })
  }
  //改变权限
  const onCheck = (checkKeys) => {
    setcurrentRights(checkKeys.checked)
  }
  //提交改变权限
  const handleOk = () => {
    handleCancel()
    axios.patch(`/roles/${currentId}`,{
      rights:currentRights
    }).then(res=>{
      getdata()
    })
  }
  //弹框取消
  const handleCancel = () => {
    setisModalVisible(false)
  }
  return (
    <div>
      <div>
        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={{
            pageSize: 5,
          }}
        />
        {/* //弹框 */}
        <Modal
          title="权限分配"
          open={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Tree
            checkable
            checkedKeys={currentRights} //选中复选框的树节点，受控   -----当前选中的目录
            onCheck={onCheck}
            checkStrictly={true} //状态下节点选择完全受控
            treeData={rightList}
          />
        </Modal>
      </div>
    </div>
  )
}
export default RoleList
